<template>
  <div class="msg">
    <!-- {{data}} -->
      
      <div class="list-flexd" v-if="myData && myData.length != 0" >
        <div class="top-tip" v-if="pulldownMsg">
            <img src="../../base/loading/loading.gif" v-if="pulldownMsg == '加载中...'"/>
            <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <scroll 
            class="scroll"
            :data="myData"
            :pull-up-load="pullUpLoad" 
            :pullup="isPullup"
            @touchEnd="touchEnd"
            @scroll="scroll"
            @scrollToEnd="searchMore"
            ref="suggest">
          <div>
            
            <div v-for="(item, index) in myData" class="detail" :key="index" style="position: relative; padding:20px 30px 30px;margin:15px 15px 15px 50px;background-color:#fff;">
              <div style="width: 35px;height:35px;position: absolute;left: -40px;top: 10px;">
                <!-- <img src="../../../static/img/铃.svg" > -->
                <img src="../../../static/img/铃.svg" v-if="item.hasread =='已读'">
                <img src="../../../static/img/铃铛.svg" v-if="item.hasread !='已读'">
              </div> 
              <p class="listp" >{{item.msgtype}} <span style="float:right;">{{item.addtime}}</span></p>
              <div class="space-box">
                <p :class="{'space-text':item.hasread !='已读'}" v-html="item.msg"></p>
                <span class="space-box__btn" v-if="item.hasread !='已读'" @click="showMoreMsssageFn(item)">查看更改></span>
              </div>
            </div>
             <!--底部loading-->
            <loading v-show="isHasLoadMore && myData.length" title="加载中..."></loading>
            <p class="not-tit" v-if="myData.length && !isHasLoadMore">————我是有底线的————</p>
          </div>
        </scroll>
      </div>
      <!--没数据得情况-->
      <div class="not-data__box flex-display flex-display-column flex-center-pack flex-center-align" v-if="!isHasLoadMore && !myData.length">
          <img src="../../../static/img/not-data.png"/>
          <span>抱歉！暂无相关消息记录</span>
      </div>
  </div>
</template>
<script>
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
import Scroll from '@/base/scroll/scroll'
import ComHeader from '@/common/ComHeader'
import ComFooter from '@/common/ComFooter'
import { Cell, Badge, Toast, Indicator } from 'mint-ui';
import api from "@/fetch/api"
import Loading from '@/base/loading/loading'
  export default {
    name: 'msgList',
    props:["data","maxHeight"],
    data(){
      return {
        items: [],
        myData: null,
        type: this.getUrlParams('type'),
        list:'',
        page: 1,
        limit:10,
        pullUpLoad: true,
        pulldownMsg: '',
        isPullup: true,
        showling:1,
        isHasMore:false,
        isHasLoadMore: true,    // 是否价值底部loading
        nextPage: null,     // 是否存在下一页
        otherType: 4
      }
    },
    created(){
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      this.getmsg(this.data)
    },
    watch:{
      data:{
        handler (new_val, old_val) {
          if(this.$refs.suggest) {
            this.$refs.suggest.scrollTo(0, 0)
          }
          Indicator.open({
            text: '加载中...',
            spinnerType: 'fading-circle'
          })
          
          this.getmsg(new_val)          
        }
      }
    },
    components: {
      Cell,
      Badge,
      ComHeader,
      ComFooter,
      Loading,
      Scroll,
      Toast,
      Indicator,

    },
    methods: {
      scroll() {
        this.pulldownMsg = '释放立即加载'
      },
      touchEnd() {
        this.pulldownMsg = '加载中...'
        setTimeout(() => {
          this.page = 1
          if(this.$refs.suggest) {
              this.$refs.suggest.scrollTo(0, 0)
          }
          this.isHasLoadMore = true
          this.getmsg(this.data,false)
          this.$refs.suggest.scrollTo(0, 0)
        },2000)
      },
      searchMore() {
        if(this.nextPage) {
            this.page++
            this.getmsg(this.data,true)
        }
      },
      // 查看更多消息
      showMoreMsssageFn(item) {
          const params = {
            msgid: item.id
          };
          api.xinxiyiduViews(params)
            .catch(result => {
              if(result.status === 200) {
                item.hasread = '已读'
              }
             
          })
      },
      // 获取消息中心数据
      getmsg(type,isLoading = false){
        var params2 = {
          username:this.getUserId(),
          // username:15155056161,
          type:type,
          page: this.page,
          limit:this.limit
        }
        api.getMsgList(params2)
              .catch(error => {
                this.pulldownMsg = ''
                Indicator.close()
                this.isHasMore = true
                if(error.status === 200) {
                    Toast({
                        message: '获取消息成功',
                        duration:1000
                    });
                    if(!isLoading && this.$refs.suggest) {
                        this.$refs.suggest.scrollTo(0, 0)
                    }
                    this.myData = !isLoading ? error.data.results : [...this.myData, ...error.data.results]
                    console.log(this.myData)
                    console.log("this.myData")
                    this.isHasLoadMore = error.data.next  ? true : false
                    this.nextPage =  error.data.next
                   
                }
              }).then((result) => {
                Indicator.close()
                this.pulldownMsg = ''
              })
      },


      refresh: function (done) {
        var self = this
        setTimeout(()=>{
          var start = self.top - 1
          for (var i = start; i > start - 10; i--) {
            self.items.splice(0, 0, i + ' - keep walking, be 2 with you.');
          }
          if(this.$refs.suggest) {
              this.$refs.suggest.scrollTo(0, 0)
          }
          self.top = self.top - 10;
          this.isHasLoadMore = true
          done();
          this.getmsg(this.data)
        }, 1500)
      },

      getDataList() {
        const params = {
          username: this.getUserId(),
          type: this.type
        };
        api.getMsgList(params)
          .catch(error => {
            this.print(error);
            console.log(666)
            this.myData = error.data;
          })
      },
      //点击阅读[功能作废]
      // clickRead(item) {
      //   if(item.hasread == '未读'){
      //     const params = {
      //       msgid: item.id
      //     };
      //     api.xinxiyiduViews(params)
      //       .catch(error => {
      //         this.print(error);
      //         this.list = error.data
      //         console.log("0000")
      //       })
      //   }
      //   this.setlocalStorage('msgDetail', item);
      //   this.$router.push('/msg/detail');
      // }
    }
  }
</script>
<style lang="stylus" scoped>
.not-tit{
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align :center;
  color:#666;
  font-size:0.35rem;
}
.not-data__box{
    color #666;
    height 100%;
    >img{
        width 80%
        height auto
        margin-bottom 5px;
    }
}
.refresh-hook{
  color #666;
}
.top-tip{
  width: 100%;
  height 0.8rem;
  max-height: 0.8rem;
  text-align: center;
  display: flex;
  color #999;
  justify-content: center;
  align-items: center;
}
.top-tip>img{
  width 24px;
  height 24px;
}
  .space-box
    display flex
  .space-text{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    flex:1
  }
  .scroll{
    height 100%
  overflow hidden
  }
  .space-box__btn{
    color #26a2ff
  }
  .notRead{
    background: #f7f6f6;
  }
  .msg,.scrollers{
    position: relative;
    height: 100%;
  }
</style>
<style lang="stylus">
html,body, #app{
  height: 100%;
}
.msgIndex .mint-cell{min-height: 1.6rem;}
.mtcell{border-bottom: 1px solid #ccc;margin-bottom: 0.1rem;}
.mtcell:nth-last-child(1){border-bottom: 1px solid #fff;}
.listp{padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid #ddd;}
</style>
<style lang="scss" scoped>
.list-flexd{
  position: fixed;
    width: 100%;
    top: 94px;
    bottom: 52px;
}
</style>

